<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1">
    <title>直播界面</title>

    <link rel="stylesheet" href="CSS/live.css">
    <link rel="stylesheet" href="CSS/reset.css">
    <script src="JS/live.js"></script>
</head>
<body>
<div class="wrapper">
    <!-- 头部 -->
    <header>
        <!-- 头部头像 -->
        <div class="left">
            <div class="top_avatar" onclick="location.href='personal_page.html'">
                <img src="img/avatar.jpg" alt="">
            </div>
        </div>

        <!-- 头部搜索框 -->
        <div class="top_search">
            <img src="bili_icon/bili_search.png" alt="">请输入搜索内容
        </div>

        <div class="right">
            <div class="activity">
                <img src="bili_icon/bili_activity.jpg">
            </div>

            <div class="game">
                <img src="bili_icon/bili_game.jpg">
            </div>

            <div class="message">
                <img src="bili_icon/bili_message.jpg" alt="">
            </div>
        </div>
    </header>

    <!-- 分类列表部分 -->
    <div class="category_list">
        <div class="left">
            <div class="current" onclick="location.href='live.html'">
                直播
                <div class="horizontal-line"></div>
            </div>
            <div onclick="location.href='main.html'">推荐</div>
            <div  onclick="location.href='hot.html'">热门</div>
            <div>动画</div>
            <div>影视</div>
            <div>新征程</div>
        </div>

        <div class="right">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path fill="#999999" d="M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 5a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 5a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1"/>
            </svg>
        </div>
    </div>

    <!-- 内容部分 -->
    <div class="content">
        <!-- 切换图片 -->
        <div class="switch_img">
            <ul>
                <li><img src="img/live_content_04.jpg" alt=""></li>
                <li><img src="img/live_content_01.jpg" alt=""></li>
                <li><img src="img/live_content_02.jpg" alt=""></li>
                <li><img src="img/live_content_03.jpg" alt=""></li>
                <li><img src="img/live_content_04.jpg" alt=""></li>
                <li><img src="img/live_content_01.jpg" alt=""></li>
            </ul>
        </div>

        <!-- 我的关注 -->
        <div class="my_concern">
            <div class="top">
                <div class="left">
                    <p class="concern">我的关注</p>
                    <p class="number">7</p>
                    <p class="more">人正在直播</p>
                    <img src="bili_icon/bili_live_move.gif" alt="">
                </div>

                <div class="right">
                    <img src="img/live_avatar_09.jpg">
                    全部
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                    </svg>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <div class="zhubo">
                            <div class="avatar">
                                <img src="img/live_avatar_02.jpg" alt="">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 64 64">
                                    <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z " fill="#FEC531" transform="translate(48.7578125,2.61328125)"/>
                                    <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z M-36.7578125 12.38671875 C-41.87113263 20.26512231 -43.89516859 26.94555897 -42.7578125 36.38671875 C-40.11303237 44.49672719 -36.21625292 50.21057824 -28.7578125 54.38671875 C-27.6853125 55.00546875 -26.6128125 55.62421875 -25.5078125 56.26171875 C-17.63824286 58.62258964 -10.8876843 58.30819447 -3.3828125 54.88671875 C1.97171087 51.91198355 5.26371808 48.70616063 8.2421875 43.38671875 C9.1703125 41.77796875 9.1703125 41.77796875 10.1171875 40.13671875 C12.47316866 32.28344823 12.23636833 24.67022979 8.4296875 17.34765625 C4.2999764 10.5281991 -1.10262595 6.14215976 -8.74609375 3.76953125 C-19.25053259 1.77062832 -29.30098743 4.5830646 -36.7578125 12.38671875 Z " fill="#FAF9F7" transform="translate(48.7578125,2.61328125)"/>
                                    <path d="M0 0 C-0.4452885 5.27315333 -1.08373163 10.01770224 -3 15 C0.63 15 4.26 15 8 15 C8 20 8 20 6.41113281 22.2199707 C5.31816895 23.31184692 5.31816895 23.31184692 4.203125 24.42578125 C3.01203125 25.61977539 3.01203125 25.61977539 1.796875 26.83789062 C0.95640625 27.65451172 0.1159375 28.47113281 -0.75 29.3125 C-1.575 30.14845703 -2.4 30.98441406 -3.25 31.84570312 C-9.47965561 38 -9.47965561 38 -14 38 C-13.69163768 35.87439563 -13.37818386 33.74952935 -13.0625 31.625 C-12.88847656 30.44164063 -12.71445312 29.25828125 -12.53515625 28.0390625 C-12 25 -12 25 -11 23 C-14.63 23 -18.26 23 -22 23 C-22 18 -22 18 -20.41113281 15.7800293 C-19.68249023 15.05211182 -18.95384766 14.32419434 -18.203125 13.57421875 C-17.4090625 12.77822266 -16.615 11.98222656 -15.796875 11.16210938 C-14.95640625 10.34548828 -14.1159375 9.52886719 -13.25 8.6875 C-12.425 7.85154297 -11.6 7.01558594 -10.75 6.15429688 C-4.52034439 0 -4.52034439 0 0 0 Z " fill="#FEFBF5" transform="translate(40,14)"/>
                                </svg>
                            </div>
                            <div class="name">
                                老实憨厚的笑笑
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="zhubo">
                            <div class="avatar">
                                <img src="img/live_avatar_01.jpg" alt="">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50pt" height="50pt" viewBox="0 0 50 50" style="" preserveAspectRatio="xMidYMid meet">
                                    <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                        <path d="M 20.500 2.914 C 2.694 7.376 -3.436 28.989 9.658 41.136 C 18.704 49.527 31.296 49.527 40.342 41.136 C 51.755 30.549 48.753 11.840 34.500 4.732 C 30.599 2.787 24.280 1.966 20.500 2.914 M 32.768 6.548 C 43.182 10.899 47.884 23.155 43.110 33.500 C 36.031 48.838 13.969 48.838 6.890 33.500 C 3.567 26.300 5.000 16.895 10.298 11.132 C 15.456 5.521 25.437 3.484 32.768 6.548 "/></g>
                                    <g fill="#4AC7FFFF" stroke="#4AC7FFFF">
                                        <path d="M 22.500 5.469 C 21.950 5.665 20.271 6.096 18.768 6.427 C 15.327 7.185 9.397 12.335 7.287 16.398 C 5.346 20.138 5.158 29.524 6.956 33.004 C 10.729 40.312 17.124 44.323 25.000 44.323 C 32.876 44.323 39.271 40.312 43.044 33.004 C 44.823 29.560 44.656 20.135 42.751 16.500 C 41.028 13.213 36.636 8.816 33.500 7.238 C 31.226 6.094 24.005 4.933 22.500 5.469 M 32.561 23.000 C 35.644 23.000 38.017 23.338 37.833 23.750 C 37.650 24.163 33.744 28.100 29.153 32.500 L 20.806 40.500 21.513 33.806 L 22.221 27.112 16.860 26.806 L 11.500 26.500 19.500 18.211 L 27.500 9.922 27.228 16.461 L 26.956 23.000 32.561 23.000 "/></g>
                                    <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                        <path d="M 19.523 19.012 L 11.547 27.000 17.308 27.000 L 23.069 27.000 22.410 32.250 C 22.048 35.138 21.695 37.842 21.626 38.260 C 21.557 38.677 24.988 35.827 29.250 31.926 C 33.513 28.025 37.000 24.421 37.000 23.917 C 37.000 23.412 34.534 23.000 31.519 23.000 L 26.038 23.000 26.681 18.250 C 27.034 15.638 27.363 12.943 27.412 12.262 C 27.460 11.581 23.911 14.619 19.523 19.012 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 22.500 15.457 L 17.500 20.554 22.500 15.457 L 27.500 10.361 22.500 15.457 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 39.000 38.924 L 36.500 41.566 39.000 38.924 L 41.500 36.282 39.000 38.924 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 11.000 39.000 L 14.000 42.000 11.000 39.000 L 8.000 36.000 11.000 39.000 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 39.000 11.000 L 42.000 14.000 39.000 11.000 L 36.000 8.000 39.000 11.000 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 11.000 10.924 L 8.500 13.566 11.000 10.924 L 13.500 8.282 11.000 10.924 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 21.361 37.437 C 21.521 39.052 21.898 39.952 22.200 39.437 C 22.503 38.922 22.372 37.600 21.910 36.500 C 21.232 34.885 21.127 35.065 21.361 37.437 "/></g>
                                    <g fill="#76D5FFFF" stroke="#76D5FFFF">
                                        <path d="M 15.000 22.888 L 13.500 24.563 15.000 22.888 L 16.500 21.212 15.000 22.888 "/></g>
                                    <g fill="#D2F1FFFF" stroke="#D2F1FFFF">
                                        <path d="M 24.378 36.378 L 23.500 37.256 24.378 36.378 L 25.256 35.500 24.378 36.378 "/></g>
                                </svg>
                            </div>
                            <div class="name">
                                央视频
                            </div>
                        </div>
                    </li>



                    <li>
                        <div class="zhubo">
                            <div class="avatar">
                                <img src="img/live_avatar_07.jpg" alt="">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 64 64">
                                    <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z " fill="#FEC531" transform="translate(48.7578125,2.61328125)"/>
                                    <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z M-36.7578125 12.38671875 C-41.87113263 20.26512231 -43.89516859 26.94555897 -42.7578125 36.38671875 C-40.11303237 44.49672719 -36.21625292 50.21057824 -28.7578125 54.38671875 C-27.6853125 55.00546875 -26.6128125 55.62421875 -25.5078125 56.26171875 C-17.63824286 58.62258964 -10.8876843 58.30819447 -3.3828125 54.88671875 C1.97171087 51.91198355 5.26371808 48.70616063 8.2421875 43.38671875 C9.1703125 41.77796875 9.1703125 41.77796875 10.1171875 40.13671875 C12.47316866 32.28344823 12.23636833 24.67022979 8.4296875 17.34765625 C4.2999764 10.5281991 -1.10262595 6.14215976 -8.74609375 3.76953125 C-19.25053259 1.77062832 -29.30098743 4.5830646 -36.7578125 12.38671875 Z " fill="#FAF9F7" transform="translate(48.7578125,2.61328125)"/>
                                    <path d="M0 0 C-0.4452885 5.27315333 -1.08373163 10.01770224 -3 15 C0.63 15 4.26 15 8 15 C8 20 8 20 6.41113281 22.2199707 C5.31816895 23.31184692 5.31816895 23.31184692 4.203125 24.42578125 C3.01203125 25.61977539 3.01203125 25.61977539 1.796875 26.83789062 C0.95640625 27.65451172 0.1159375 28.47113281 -0.75 29.3125 C-1.575 30.14845703 -2.4 30.98441406 -3.25 31.84570312 C-9.47965561 38 -9.47965561 38 -14 38 C-13.69163768 35.87439563 -13.37818386 33.74952935 -13.0625 31.625 C-12.88847656 30.44164063 -12.71445312 29.25828125 -12.53515625 28.0390625 C-12 25 -12 25 -11 23 C-14.63 23 -18.26 23 -22 23 C-22 18 -22 18 -20.41113281 15.7800293 C-19.68249023 15.05211182 -18.95384766 14.32419434 -18.203125 13.57421875 C-17.4090625 12.77822266 -16.615 11.98222656 -15.796875 11.16210938 C-14.95640625 10.34548828 -14.1159375 9.52886719 -13.25 8.6875 C-12.425 7.85154297 -11.6 7.01558594 -10.75 6.15429688 C-4.52034439 0 -4.52034439 0 0 0 Z " fill="#FEFBF5" transform="translate(40,14)"/>
                                </svg>
                            </div>
                            <div class="name">
                                寅山
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="zhubo">
                            <div class="avatar">
                                <img src="img/live_avatar_09.jpg" alt="">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 64 64">
                                    <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z " fill="#FEC531" transform="translate(48.7578125,2.61328125)"/>
                                    <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z M-36.7578125 12.38671875 C-41.87113263 20.26512231 -43.89516859 26.94555897 -42.7578125 36.38671875 C-40.11303237 44.49672719 -36.21625292 50.21057824 -28.7578125 54.38671875 C-27.6853125 55.00546875 -26.6128125 55.62421875 -25.5078125 56.26171875 C-17.63824286 58.62258964 -10.8876843 58.30819447 -3.3828125 54.88671875 C1.97171087 51.91198355 5.26371808 48.70616063 8.2421875 43.38671875 C9.1703125 41.77796875 9.1703125 41.77796875 10.1171875 40.13671875 C12.47316866 32.28344823 12.23636833 24.67022979 8.4296875 17.34765625 C4.2999764 10.5281991 -1.10262595 6.14215976 -8.74609375 3.76953125 C-19.25053259 1.77062832 -29.30098743 4.5830646 -36.7578125 12.38671875 Z " fill="#FAF9F7" transform="translate(48.7578125,2.61328125)"/>
                                    <path d="M0 0 C-0.4452885 5.27315333 -1.08373163 10.01770224 -3 15 C0.63 15 4.26 15 8 15 C8 20 8 20 6.41113281 22.2199707 C5.31816895 23.31184692 5.31816895 23.31184692 4.203125 24.42578125 C3.01203125 25.61977539 3.01203125 25.61977539 1.796875 26.83789062 C0.95640625 27.65451172 0.1159375 28.47113281 -0.75 29.3125 C-1.575 30.14845703 -2.4 30.98441406 -3.25 31.84570312 C-9.47965561 38 -9.47965561 38 -14 38 C-13.69163768 35.87439563 -13.37818386 33.74952935 -13.0625 31.625 C-12.88847656 30.44164063 -12.71445312 29.25828125 -12.53515625 28.0390625 C-12 25 -12 25 -11 23 C-14.63 23 -18.26 23 -22 23 C-22 18 -22 18 -20.41113281 15.7800293 C-19.68249023 15.05211182 -18.95384766 14.32419434 -18.203125 13.57421875 C-17.4090625 12.77822266 -16.615 11.98222656 -15.796875 11.16210938 C-14.95640625 10.34548828 -14.1159375 9.52886719 -13.25 8.6875 C-12.425 7.85154297 -11.6 7.01558594 -10.75 6.15429688 C-4.52034439 0 -4.52034439 0 0 0 Z " fill="#FEFBF5" transform="translate(40,14)"/>
                                </svg>
                            </div>
                            <div class="name">
                                陆鳐LuLu
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="zhubo">
                            <div class="avatar">
                                <img src="img/live_avatar_10.jpg" alt="">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50pt" height="50pt" viewBox="0 0 50 50" style="" preserveAspectRatio="xMidYMid meet">
                                    <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                        <path d="M 20.500 2.914 C 2.694 7.376 -3.436 28.989 9.658 41.136 C 18.704 49.527 31.296 49.527 40.342 41.136 C 51.755 30.549 48.753 11.840 34.500 4.732 C 30.599 2.787 24.280 1.966 20.500 2.914 M 32.768 6.548 C 43.182 10.899 47.884 23.155 43.110 33.500 C 36.031 48.838 13.969 48.838 6.890 33.500 C 3.567 26.300 5.000 16.895 10.298 11.132 C 15.456 5.521 25.437 3.484 32.768 6.548 "/></g>
                                    <g fill="#4AC7FFFF" stroke="#4AC7FFFF">
                                        <path d="M 22.500 5.469 C 21.950 5.665 20.271 6.096 18.768 6.427 C 15.327 7.185 9.397 12.335 7.287 16.398 C 5.346 20.138 5.158 29.524 6.956 33.004 C 10.729 40.312 17.124 44.323 25.000 44.323 C 32.876 44.323 39.271 40.312 43.044 33.004 C 44.823 29.560 44.656 20.135 42.751 16.500 C 41.028 13.213 36.636 8.816 33.500 7.238 C 31.226 6.094 24.005 4.933 22.500 5.469 M 32.561 23.000 C 35.644 23.000 38.017 23.338 37.833 23.750 C 37.650 24.163 33.744 28.100 29.153 32.500 L 20.806 40.500 21.513 33.806 L 22.221 27.112 16.860 26.806 L 11.500 26.500 19.500 18.211 L 27.500 9.922 27.228 16.461 L 26.956 23.000 32.561 23.000 "/></g>
                                    <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                        <path d="M 19.523 19.012 L 11.547 27.000 17.308 27.000 L 23.069 27.000 22.410 32.250 C 22.048 35.138 21.695 37.842 21.626 38.260 C 21.557 38.677 24.988 35.827 29.250 31.926 C 33.513 28.025 37.000 24.421 37.000 23.917 C 37.000 23.412 34.534 23.000 31.519 23.000 L 26.038 23.000 26.681 18.250 C 27.034 15.638 27.363 12.943 27.412 12.262 C 27.460 11.581 23.911 14.619 19.523 19.012 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 22.500 15.457 L 17.500 20.554 22.500 15.457 L 27.500 10.361 22.500 15.457 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 39.000 38.924 L 36.500 41.566 39.000 38.924 L 41.500 36.282 39.000 38.924 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 11.000 39.000 L 14.000 42.000 11.000 39.000 L 8.000 36.000 11.000 39.000 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 39.000 11.000 L 42.000 14.000 39.000 11.000 L 36.000 8.000 39.000 11.000 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 11.000 10.924 L 8.500 13.566 11.000 10.924 L 13.500 8.282 11.000 10.924 "/></g>
                                    <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                        <path d="M 21.361 37.437 C 21.521 39.052 21.898 39.952 22.200 39.437 C 22.503 38.922 22.372 37.600 21.910 36.500 C 21.232 34.885 21.127 35.065 21.361 37.437 "/></g>
                                    <g fill="#76D5FFFF" stroke="#76D5FFFF">
                                        <path d="M 15.000 22.888 L 13.500 24.563 15.000 22.888 L 16.500 21.212 15.000 22.888 "/></g>
                                    <g fill="#D2F1FFFF" stroke="#D2F1FFFF">
                                        <path d="M 24.378 36.378 L 23.500 37.256 24.378 36.378 L 25.256 35.500 24.378 36.378 "/></g>
                                </svg>
                            </div>
                            <div class="name">
                                哔哩哔哩英雄联盟赛事
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="zhubo">
                            <div class="avatar">
                                <img src="img/live_avatar_05.jpg" alt="">
                            </div>
                            <div class="name">
                                计算机考研大师兄
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="zhubo">
                            <div class="avatar">
                                <img src="img/live_avatar_06.jpg" alt="">
                            </div>
                            <div class="name">
                                李永乐考研团队
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 分区栏 -->
        <div class="partition">
            <div class="left">
                <p class="current">推荐</p>
                <p>人气</p>
                <p>颜值</p>
                <p>英雄联盟</p>
                <p>虚拟主播</p>
                <p>王者荣耀</p>
                <p>娱乐</p>
                <p>单机游戏</p>
                <p>电台</p>
            </div>

            <div class="right">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                    <path fill="#808080" d="M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm6 0H5v4h4zm4 0a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v4h4zM3 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm6 0H5v4h4zm4 0a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v4h4z"/>
                </svg>
            </div>
        </div>

        <!-- 推荐直播 -->
        <ul class="recommend_live">
            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_01.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>1.9万</p>
                        </div>

                        <div class="right">视频唱见</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_01.jpg" alt="">
                        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50pt" height="50pt" viewBox="0 0 50 50" style="" preserveAspectRatio="xMidYMid meet">
                            <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                <path d="M 20.500 2.914 C 2.694 7.376 -3.436 28.989 9.658 41.136 C 18.704 49.527 31.296 49.527 40.342 41.136 C 51.755 30.549 48.753 11.840 34.500 4.732 C 30.599 2.787 24.280 1.966 20.500 2.914 M 32.768 6.548 C 43.182 10.899 47.884 23.155 43.110 33.500 C 36.031 48.838 13.969 48.838 6.890 33.500 C 3.567 26.300 5.000 16.895 10.298 11.132 C 15.456 5.521 25.437 3.484 32.768 6.548 "/></g>
                            <g fill="#4AC7FFFF" stroke="#4AC7FFFF">
                                <path d="M 22.500 5.469 C 21.950 5.665 20.271 6.096 18.768 6.427 C 15.327 7.185 9.397 12.335 7.287 16.398 C 5.346 20.138 5.158 29.524 6.956 33.004 C 10.729 40.312 17.124 44.323 25.000 44.323 C 32.876 44.323 39.271 40.312 43.044 33.004 C 44.823 29.560 44.656 20.135 42.751 16.500 C 41.028 13.213 36.636 8.816 33.500 7.238 C 31.226 6.094 24.005 4.933 22.500 5.469 M 32.561 23.000 C 35.644 23.000 38.017 23.338 37.833 23.750 C 37.650 24.163 33.744 28.100 29.153 32.500 L 20.806 40.500 21.513 33.806 L 22.221 27.112 16.860 26.806 L 11.500 26.500 19.500 18.211 L 27.500 9.922 27.228 16.461 L 26.956 23.000 32.561 23.000 "/></g>
                            <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                <path d="M 19.523 19.012 L 11.547 27.000 17.308 27.000 L 23.069 27.000 22.410 32.250 C 22.048 35.138 21.695 37.842 21.626 38.260 C 21.557 38.677 24.988 35.827 29.250 31.926 C 33.513 28.025 37.000 24.421 37.000 23.917 C 37.000 23.412 34.534 23.000 31.519 23.000 L 26.038 23.000 26.681 18.250 C 27.034 15.638 27.363 12.943 27.412 12.262 C 27.460 11.581 23.911 14.619 19.523 19.012 "/></g>
                            <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                <path d="M 22.500 15.457 L 17.500 20.554 22.500 15.457 L 27.500 10.361 22.500 15.457 "/></g>
                            <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                <path d="M 39.000 38.924 L 36.500 41.566 39.000 38.924 L 41.500 36.282 39.000 38.924 "/></g>
                            <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                <path d="M 11.000 39.000 L 14.000 42.000 11.000 39.000 L 8.000 36.000 11.000 39.000 "/></g>
                            <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                <path d="M 39.000 11.000 L 42.000 14.000 39.000 11.000 L 36.000 8.000 39.000 11.000 "/></g>
                            <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                <path d="M 11.000 10.924 L 8.500 13.566 11.000 10.924 L 13.500 8.282 11.000 10.924 "/></g>
                            <g fill="#A3E3FFFF" stroke="#A3E3FFFF">
                                <path d="M 21.361 37.437 C 21.521 39.052 21.898 39.952 22.200 39.437 C 22.503 38.922 22.372 37.600 21.910 36.500 C 21.232 34.885 21.127 35.065 21.361 37.437 "/></g>
                            <g fill="#76D5FFFF" stroke="#76D5FFFF">
                                <path d="M 15.000 22.888 L 13.500 24.563 15.000 22.888 L 16.500 21.212 15.000 22.888 "/></g>
                            <g fill="#D2F1FFFF" stroke="#D2F1FFFF">
                                <path d="M 24.378 36.378 L 23.500 37.256 24.378 36.378 L 25.256 35.500 24.378 36.378 "/></g>
                        </svg>
                    </div>

                    <div class="right">
                        <div class="title">
                            【听TA的歌】上新了！周深唱歌合集，让你一次听个够
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                <div class="special">已关注</div>
                                <p>央视频</p>
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_02.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>21.0万</p>
                        </div>

                        <div class="right">英雄联盟</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_02.jpg" alt="">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 65 65">
                            <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z " fill="#FEC531" transform="translate(48.7578125,2.61328125)"/>
                            <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z M-36.7578125 12.38671875 C-41.87113263 20.26512231 -43.89516859 26.94555897 -42.7578125 36.38671875 C-40.11303237 44.49672719 -36.21625292 50.21057824 -28.7578125 54.38671875 C-27.6853125 55.00546875 -26.6128125 55.62421875 -25.5078125 56.26171875 C-17.63824286 58.62258964 -10.8876843 58.30819447 -3.3828125 54.88671875 C1.97171087 51.91198355 5.26371808 48.70616063 8.2421875 43.38671875 C9.1703125 41.77796875 9.1703125 41.77796875 10.1171875 40.13671875 C12.47316866 32.28344823 12.23636833 24.67022979 8.4296875 17.34765625 C4.2999764 10.5281991 -1.10262595 6.14215976 -8.74609375 3.76953125 C-19.25053259 1.77062832 -29.30098743 4.5830646 -36.7578125 12.38671875 Z " fill="#FAF9F7" transform="translate(48.7578125,2.61328125)"/>
                            <path d="M0 0 C-0.4452885 5.27315333 -1.08373163 10.01770224 -3 15 C0.63 15 4.26 15 8 15 C8 20 8 20 6.41113281 22.2199707 C5.31816895 23.31184692 5.31816895 23.31184692 4.203125 24.42578125 C3.01203125 25.61977539 3.01203125 25.61977539 1.796875 26.83789062 C0.95640625 27.65451172 0.1159375 28.47113281 -0.75 29.3125 C-1.575 30.14845703 -2.4 30.98441406 -3.25 31.84570312 C-9.47965561 38 -9.47965561 38 -14 38 C-13.69163768 35.87439563 -13.37818386 33.74952935 -13.0625 31.625 C-12.88847656 30.44164063 -12.71445312 29.25828125 -12.53515625 28.0390625 C-12 25 -12 25 -11 23 C-14.63 23 -18.26 23 -22 23 C-22 18 -22 18 -20.41113281 15.7800293 C-19.68249023 15.05211182 -18.95384766 14.32419434 -18.203125 13.57421875 C-17.4090625 12.77822266 -16.615 11.98222656 -15.796875 11.16210938 C-14.95640625 10.34548828 -14.1159375 9.52886719 -13.25 8.6875 C-12.425 7.85154297 -11.6 7.01558594 -10.75 6.15429688 C-4.52034439 0 -4.52034439 0 0 0 Z " fill="#FEFBF5" transform="translate(40,14)"/>
                        </svg>
                    </div>

                    <div class="right">
                        <div class="title">
                            德云色 19点解说！
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                <div class="special">已关注</div>
                                <p>老实憨厚的笑笑</p>
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_03.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>1.9万</p>
                        </div>

                        <div class="right">自习室</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_03.jpg" alt="">
                    </div>

                    <div class="right">
                        <div class="title">
                            张宇1000题强化篇已开更
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                考研数学清沐
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_04.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>2567</p>
                        </div>

                        <div class="right">自习室</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_04.jpg" alt="">
                    </div>

                    <div class="right">
                        <div class="title">
                            25考研|三战的努力er
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                别发呆魔芋粉
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_05.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>1.9万</p>
                        </div>

                        <div class="right">成长学习</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_05.jpg" alt="">
                    </div>

                    <div class="right">
                        <div class="title">
                            25计算机考研-408强化期如何准备
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                <div class="special">已关注</div>
                                <p>计算机考研大师兄</p>
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_06.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>1.8万</p>
                        </div>

                        <div class="right">自习室</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_06.jpg" alt="">
                    </div>

                    <div class="right">
                        <div class="title">
                            25考研数学强化带学
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                <div class="special">已关注</div>
                                <p>李永乐考研团队</p>
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_07.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>2.3万</p>
                        </div>

                        <div class="right">颜值</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_07.jpg" alt="">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 70 70">
                            <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z " fill="#FEC531" transform="translate(48.7578125,2.61328125)"/>
                            <path d="M0 0 C7.96178349 4.92409955 13.8173471 11.22170646 16.84765625 20.17578125 C18.52455076 29.57303166 18.34923055 40.12913365 13.2421875 48.38671875 C8.06176799 55.66035517 1.29129209 61.7719492 -7.7578125 63.38671875 C-19.71624872 64.19186733 -28.96456657 63.58852811 -38.5703125 55.69921875 C-44.72201123 49.87415889 -48.42590482 43.31636391 -48.99609375 34.84765625 C-49.21976527 26.54130938 -48.83711124 19.84396311 -44.7578125 12.38671875 C-44.2421875 11.33484375 -43.7265625 10.28296875 -43.1953125 9.19921875 C-32.87028788 -2.71427119 -14.35732245 -6.88861431 0 0 Z M-36.7578125 12.38671875 C-41.87113263 20.26512231 -43.89516859 26.94555897 -42.7578125 36.38671875 C-40.11303237 44.49672719 -36.21625292 50.21057824 -28.7578125 54.38671875 C-27.6853125 55.00546875 -26.6128125 55.62421875 -25.5078125 56.26171875 C-17.63824286 58.62258964 -10.8876843 58.30819447 -3.3828125 54.88671875 C1.97171087 51.91198355 5.26371808 48.70616063 8.2421875 43.38671875 C9.1703125 41.77796875 9.1703125 41.77796875 10.1171875 40.13671875 C12.47316866 32.28344823 12.23636833 24.67022979 8.4296875 17.34765625 C4.2999764 10.5281991 -1.10262595 6.14215976 -8.74609375 3.76953125 C-19.25053259 1.77062832 -29.30098743 4.5830646 -36.7578125 12.38671875 Z " fill="#FAF9F7" transform="translate(48.7578125,2.61328125)"/>
                            <path d="M0 0 C-0.4452885 5.27315333 -1.08373163 10.01770224 -3 15 C0.63 15 4.26 15 8 15 C8 20 8 20 6.41113281 22.2199707 C5.31816895 23.31184692 5.31816895 23.31184692 4.203125 24.42578125 C3.01203125 25.61977539 3.01203125 25.61977539 1.796875 26.83789062 C0.95640625 27.65451172 0.1159375 28.47113281 -0.75 29.3125 C-1.575 30.14845703 -2.4 30.98441406 -3.25 31.84570312 C-9.47965561 38 -9.47965561 38 -14 38 C-13.69163768 35.87439563 -13.37818386 33.74952935 -13.0625 31.625 C-12.88847656 30.44164063 -12.71445312 29.25828125 -12.53515625 28.0390625 C-12 25 -12 25 -11 23 C-14.63 23 -18.26 23 -22 23 C-22 18 -22 18 -20.41113281 15.7800293 C-19.68249023 15.05211182 -18.95384766 14.32419434 -18.203125 13.57421875 C-17.4090625 12.77822266 -16.615 11.98222656 -15.796875 11.16210938 C-14.95640625 10.34548828 -14.1159375 9.52886719 -13.25 8.6875 C-12.425 7.85154297 -11.6 7.01558594 -10.75 6.15429688 C-4.52034439 0 -4.52034439 0 0 0 Z " fill="#FEFBF5" transform="translate(40,14)"/>
                        </svg>
                    </div>

                    <div class="right">
                        <div class="title">
                            兄弟 上号了
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                <div class="special">已关注</div>
                                寅山
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <!-- 封面部分 -->
                <div class="cover">
                    <div class="background_img">
                        <img src="img/live_08.jpg" alt="">
                    </div>

                    <div class="data">
                        <div class="left">
                            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="59pt" height="43pt" viewBox="0 0 59 43" style="" preserveAspectRatio="xMidYMid meet">
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 23.792 3.364 C 18.304 4.886 12.173 8.900 7.893 13.775 C 1.888 20.613 2.055 23.416 8.925 31.194 C 21.043 44.912 39.688 44.787 53.006 30.897 C 59.939 23.666 59.939 20.334 53.006 13.103 C 44.730 4.472 33.409 0.698 23.792 3.364 M 42.288 8.785 C 47.996 11.854 55.000 19.135 55.000 22.000 C 55.000 24.916 47.968 32.155 41.959 35.426 C 35.298 39.051 27.340 39.311 20.744 36.118 C 15.366 33.515 7.000 24.949 7.000 22.046 C 7.000 20.924 8.644 18.186 10.654 15.961 C 20.486 5.078 30.971 2.699 42.288 8.785 "/></g>
                                <g fill="#FFFFFFFF" stroke="#FFFFFFFF">
                                    <path d="M 27.094 11.331 C 20.156 13.712 17.323 22.918 21.709 28.829 C 25.641 34.128 35.131 34.827 39.380 30.132 C 47.445 21.221 38.437 7.436 27.094 11.331 M 36.686 16.174 C 41.843 21.019 38.240 30.000 31.140 30.000 C 26.360 30.000 23.000 26.756 23.000 22.140 C 23.000 14.870 31.399 11.208 36.686 16.174 "/></g>
                            </svg>
                            <p>1646</p>
                        </div>

                        <div class="right">自习室</div>
                    </div>
                </div>

                <div class="introduction">
                    <div class="left">
                        <img src="img/live_avatar_08.jpg" alt="">
                    </div>

                    <div class="right">
                        <div class="title">
                            考研408 早七晚十准点自习室
                        </div>

                        <div class="creator">
                            <div class="creator_left">
                                考研的花朝
                            </div>

                            <div class="creator_right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="#999999" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 底部部分 -->
    <ul class="footer">
        <li class="home" onclick="location.href='main.html'">
            <img src="bili_icon/bili_home_selected.jpg" alt="">
            <p>首页</p>
        </li>

        <li class="dynamic">
            <img src="bili_icon/bili_dynamic.jpg" alt="">
            <p>动态</p>
        </li>

        <li class="add">
            <p>+</p>
        </li>

        <li class="shopping">
            <img src="bili_icon/bili_shopping.jpg" alt="">
            <p>会员购</p>
        </li>

        <li class="mine" onclick="location.href='mine.html'">
            <img src="bili_icon/bili_mine.jpg" alt="">
            <p>我的</p>
        </li>
    </ul>
</div>
</body>
</html>